<template>
  <div class="app-container">
    <div id="sjlx">
      <!-- <div>
        <span>数据类型：</span>
        <el-radio-group v-model="case_type">
          <el-radio :label="0">用例创建总数</el-radio>
          <el-radio :label="1">用例执行总数</el-radio>
          <el-radio :label="2">用例执行结果</el-radio>
        </el-radio-group>
      </div> -->

      <div id="sx">
        <span>筛选条件：</span>
        <div>
          <el-row>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 项目： </el-col>
              <el-col :span="18">
                <el-select
                  @change="pChange"
                  v-model="value[0]"
                  :clearable="true"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options[0]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 子系统： </el-col>
              <el-col :span="18">
                <el-select
                  @change="sChange"
                  filterable
                  v-model="value[5]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options[5]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 测试单： </el-col>
              <el-col :span="18">
                <el-select
                  filterable
                  v-model="value[6]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options[6]"
                    :key="item.task_name + item.task_id"
                    :label="item.task_name"
                    :value="item.task_id"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 创建人： </el-col>
              <el-col :span="18">
                <el-select
                  filterable
                  v-model="value[1]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[1]"
                    :key="item.name + '' + i"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
          </el-row>
          <el-row class="el-row">
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 执行人： </el-col>
              <el-col :span="18">
                <el-select
                  filterable
                  v-model="value[2]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[2]"
                    :key="item.name + '' + i"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 执行结果： </el-col>
              <el-col :span="18">
                <el-select
                  filterable
                  v-model="value[3]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[3]"
                    :key="item.status + '' + i"
                    :label="item.status"
                    :value="item.status"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 用例状态： </el-col>
              <el-col :span="18">
                <el-select
                  filterable
                  v-model="value[4]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[4]"
                    :key="item.status + '' + i"
                    :label="item.status"
                    :value="item.status"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 执行时间： </el-col>
              <el-col :span="18">
                <el-date-picker
                  style="width: 100%"
                  v-model="tiem"
                  type="daterange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-col>
            </el-col>
            <!-- <el-col style="margin-top: 20px" :span="15">
              <el-button
                type="primary"
                size="medium"
                @click="toPath('/exec/new')"
                >用例新增</el-button
              >
              <el-button
                type="primary"
                size="medium"
                @click="toPath('/exec/exec')"
                >用例执行</el-button
              >
            </el-col> -->
            <el-col style="margin-top: 20px" :span="6">
              <el-col style="line-height: 40px" :span="5"> 用例类型： </el-col>
              <el-col :span="18">
                <el-select
                  v-model="valueIt"
                  filterable
                  clearable
                  placeholder="请选择用例类型"
                >
                  <el-option
                    :clearable="true"
                    v-for="item in optionsIt"
                    :key="item.type"
                    :label="item.type"
                    :value="item.type"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col style="text-align: right; margin-top: 20px" :span="16">
              <el-button type="primary" size="medium" @click="next(true)"
                >搜索</el-button
              >
              <el-button type="primary" size="medium" @click="resetting"
                >重置</el-button
              >
            </el-col>
          </el-row>

          <!-- <el-row class="el-row">
            <el-col :span="6">
              <el-select
                v-model="valueIt"
                filterable
                clearable
                placeholder="请选择用例类型"
              >
                <el-option
                  :clearable="true"
                  v-for="item in optionsIt"
                  :key="item.type"
                  :label="item.type"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row> -->

          <!-- <el-row class="el-row">
            <el-col :span="10">
              <el-col style="line-height: 40px" :span="3">执行时间： </el-col>
              <el-date-picker
                v-model="tiem[0]"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期"
              >
              </el-date-picker>
              <el-date-picker
                style="margin-left: 20px"
                v-model="tiem[1]"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择时间"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="10">
              <el-col style="line-height: 40px" :span="3">创建时间： </el-col>
              <el-date-picker
                v-model="tiem2[0]"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期"
              >
              </el-date-picker>
              <el-date-picker
                style="margin-left: 20px"
                v-model="tiem2[1]"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择时间"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" size="medium" @click="next(true)"
                >搜索</el-button
              >
            </el-col>
          </el-row> -->
        </div>
      </div>
    </div>

    <div id="data">
      <el-row>
        <el-col :span="13">
          <!-- ：{{ case_detail_list.length }} -->
          <h3 style="line-height: 40px; margin-top: 0">测试用例执行清单</h3>
          <h4 v-show="executor_name">
            用例总数： {{ execute_case_total }}
            <span style="margin-left: 15px">执行总数：</span>
            {{ execute_times_total }}
          </h4>
        </el-col>
        <!-- <el-col :span="8">
          <el-radio-group v-model="tag_type" size="medium">
            <el-radio-button :label="0">全部</el-radio-button>
            <el-radio-button :label="1">已激活</el-radio-button>
            <el-radio-button :label="2">已解决</el-radio-button>
            <el-radio-button :label="3">已关闭</el-radio-button>
            <el-radio-button :label="4">空</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="download()">导出</el-button>
        </el-col> -->
      </el-row>
      <el-table
        height="800"
        :data="case_detail_list"
        border
        style="width: 100%"
        @sort-change="sortChange"
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column prop="pject_name" label="项目" width="180">
        </el-table-column>
        <el-table-column prop="subsys_name" label="子系统" width="150">
        </el-table-column>
        <el-table-column prop="task_name" label="测试单" width="150">
        </el-table-column>
        <el-table-column
          align="center"
          prop="case_priority"
          label="用例优先级"
          width="120"
          sortable
        >
        </el-table-column>
        <el-table-column prop="case_title" label="用例标题" width="390">
        </el-table-column>
        <el-table-column prop="case_status" label="用例状态" width="120">
        </el-table-column>
        <el-table-column prop="case_type" label="用例类型" width="120">
        </el-table-column>
        <el-table-column
          prop="creator"
          label="创建人"
          width="120"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column prop="executor" label="执行人" width="120">
        </el-table-column>
        <el-table-column
          prop="last_run_result"
          label="最终执行结果"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="create_date"
          label="创建时间"
          sortable
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="execute_date"
          label="执行时间"
          sortable
          width="180"
        >
        </el-table-column>
        <el-table-column prop="execute_num" label="执行次数" width="100">
        </el-table-column>
      </el-table>
      <!-- <el-row style="margin-top: 35px">
        <el-col :span="2">
          <el-checkbox @change="handleCheckedCitiesChange"></el-checkbox>
        </el-col>
        <el-col :span="2">
          <strong>项目</strong>
        </el-col>
        <el-col :span="2">
          <strong>测试单</strong>
        </el-col>
        <el-col :span="2">
          <strong>优先级</strong>
        </el-col>
        <el-col :span="4">
          <strong>标题</strong>
        </el-col>
        <el-col :span="2">
          <strong>状态</strong>
        </el-col>
        <el-col :span="2">
          <strong>创建人</strong>
        </el-col>
        <el-col :span="2">
          <strong>执行人</strong>
        </el-col>
        <el-col :span="2">
          <strong>创建时间</strong>
        </el-col>
        <el-col :span="2">
          <strong>执行时间</strong>
        </el-col>
        <el-col :span="2">
          <strong>执行次数</strong>
        </el-col>
      </el-row> -->
      <!-- <hr /> -->
      <!-- <el-row
        id="case_detail_list"
        v-for="(v, i) of case_detail_list"
        :key="v.case_id + '' + i"
        style="margin-top: 35px"
      >
        <el-col :span="2">
          <el-checkbox v-model="checked[i]"></el-checkbox>
        </el-col>
        <el-col :span="2">
          <strong :title="v.pject_name">{{ v.pject_name }}</strong>
        </el-col>
        <el-col :span="2">
          <strong :title="v.task_name">{{ v.task_name }}</strong>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.case_priority }}</strong>
        </el-col>
        <el-col :span="4">
          <strong :title="v.case_title">{{ v.case_title || "" }}</strong>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.case_status || "null" }}</strong>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.creator }}</strong>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.executor }}</strong>
        </el-col>
        <el-col :span="2">
          <strong :title="v.create_date">{{ v.create_date }}</strong>
        </el-col>
        <el-col :span="2">
          <strong :title="v.execute_date">{{ v.execute_date }}</strong>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.execute_num }}</strong>
        </el-col>
      </el-row> -->
      <div style="margin-top: 20px; text-align: right; padding-right: 55px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pageNum"
          :page-sizes="[25, 50, 75, 100]"
          layout="total, sizes,prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <!-- <el-button @click="upper()" type="primary">上一页</el-button>
        <el-button @click="next()" type="primary">下一页</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import * as bug from "@/api/bug";
import * as exec from "@/api/exec";
export default {
  data() {
    return {
      tiem: [],
      options: [],
      value: [],
      checkedAll: false,
      checked: [],
      tag_type: 0,
      case_type: "",
      subsystem: "",
      milestone_verison: "",
      verison_NO: "",
      tester_name: "",
      date_range: "",
      data_type: 2,
      radio2: "全部",
      select: null,
      case_detail_list: [],
      pageNo: 0,
      total: 0,
      pageNum: 25,
      optionsIt: [],
      valueIt: "",
      executor_name: "",
      execute_case_total: "",
      execute_times_total: "",
    };
  },
  methods: {
    resetting() {
      this.tiem = [];
      this.value = [];
    },
    toPath(path) {
      console.log(path);
      this.$router.push({
        path: `${path}`,
      });
    },
    pChange(val) {
      if (val) {
        exec.subsysList("?project_id=" + val).then((res) => {
          this.$set(this.options, 5, res.data.subsys_names);
        });

        setTimeout(() => {
          let str = "";
          if (this.value[0]) str += `project_id=${this.value[0]}&`;
          if (this.value[5]) str += `subsys_id=${this.value[5]}`;

          exec.testSheetList(str).then((res) => {
            this.$set(this.options, 6, res.data.subsys_names);
          });
        }, 200);
      }
    },
    sortMethod(a, b) {
      return a.localeCompare(b);
    },
    sortChange({ column, prop, order }) {
      this.case_detail_list.sort((a, b) => {
        if (order === "ascending") {
          return this.sortMethod(a[prop], b[prop]);
        } else if (order === "descending") {
          return this.sortMethod(b[prop], a[prop]);
        } else {
          return this.sortMethod(a[prop], b[prop]);
        }
      });
    },
    sChange(val) {
      setTimeout(() => {
        let str = "";
        if (this.value[0]) str += `project_id=${this.value[0]}&`;
        if (this.value[5]) str += `subsys_id=${this.value[5]}`;

        exec.testSheetList(str).then((res) => {
          this.$set(this.options, 6, res.data.subsys_names);
        });
      }, 200);
    },
    handleSizeChange(val) {
      this.pageNum = val;
      this.getCaseStatistics();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo = val - 1;
      this.getCaseStatistics();
      console.log(`当前页: ${val}`);
    },
    upper() {
      this.pageNo--;
      if (this.pageNo < 0) this.pageNo = 0;
      this.getCaseStatistics();
    },
    next(f) {
      if (f) this.pageNo = 0;
      else this.pageNo++;
      this.getCaseStatistics();
    },
    handleCheckedCitiesChange(value) {
      if (value) {
        for (let i in this.case_detail_list) {
          this.$set(this.checked, i, true);
        }
      } else {
        for (let i in this.case_detail_list) {
          this.$set(this.checked, i, false);
        }
      }
    },
    download() {
      let data = [];
      for (let i in this.checked) {
        if (this.checked[i]) {
          data.push(this.case_detail_list[i].case_id);
        }
      }
      bug.downloadCase({ case_ids: data }).then((res) => {
        let blob = res;
        let reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = (e) => {
          let a = document.createElement("a");
          a.download = "exec_file.csv";
          a.href = e.target.result;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        };
      });
    },
    async getCaseStatistics() {
      let v0 = -1;
      if (this.value[0] || this.value[0] == 0) v0 = this.value[0];

      let data = {
        project_id: v0,
        subsys_id: this.value[5] || "",
        test_sheet_id: this.value[6] || "",
        creator_name: this.value[1] || "",
        executor_name: this.value[2] || "",
        execute_result: this.value[3] || "",
        date_execute_start: this.tiem[0] || "", //执行起始日期
        date_execute_end: this.tiem[1] || "", //执行截止日期
        case_status: this.value[4] || "",
        pageNo: this.pageNo,
        pageNum: this.pageNum,
        case_type: this.valueIt,
      };
      let res = await bug.getCaseStatistics(data);
      if (res.data.case_detail_list) {
        this.total = res.data.case_total;
        this.case_detail_list = res.data.case_detail_list;
        this.executor_name = res.data.executor_name;
        this.execute_case_total = res.data.execute_case_total;
        this.execute_times_total = res.data.execute_times_total;
      }
    },
  },
  created() {
    // this.getCaseStatistics();
    exec.caseTypeList().then((res) => {
      this.optionsIt = res.data.type_names;
    });

    exec.creatorList().then((res) => {
      this.$set(this.options, 1, res.data.tester_names);
    });

    setTimeout(() => {
      exec.executorList().then((res) => {
        this.$set(this.options, 2, res.data.executor_names);
      });
    }, 200);

    setTimeout(() => {
      exec.subsysList().then((res) => {
        this.$set(this.options, 5, res.data.subsys_names);
      });
    }, 500);

    setTimeout(() => {
      exec.projectList().then((res) => {
        this.$set(this.options, 0, res.data.project_names);
      });
    }, 800);

    setTimeout(() => {
      exec.caseStatuslist().then((res) => {
        this.$set(this.options, 4, res.data.executor_names);
      });
      exec.executeRestultList().then((res) => {
        this.$set(this.options, 3, res.data.executor_names);
      });
    }, 1000);

    setTimeout(() => {
      exec.testSheetList().then((res) => {
        this.$set(this.options, 6, res.data.subsys_names);
      });
    }, 1300);

    // setTimeout(() => {
    //   exec.executorList().then((res) => {
    //     this.$set(this.options, 2, res.data.executor_names);
    //   });
    // }, 1200);

    setTimeout(() => {
      this.getCaseStatistics();
    }, 1600);
  },
};
</script>

<style scoped>
#case_detail_list div {
  padding: 0 5px;
}
strong {
  -webkit-line-clamp: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
  cursor: pointer;
}
#sjlx span {
  margin-right: 30px;
}

#sx {
  margin-top: 20px;
}
#sx .el-row {
  margin: 20px 0;
}

#data {
  margin: 0px 20px;
}
</style>
